<template>
  <ScaleScreen
    :width="1920"
    :height="1080"
    class="scale-wrap"
    :selfAdaption="selfAdaption"
  >
  <div id="dp_l">
    <div class="d_top">
      <div class="sjdate">
        {{ nowDate }}<span class="mrg_15">{{ nowTime }}</span>
      </div>
      <div class="d_t_title">
        <div class="d_t_twz">领导驾驶舱</div>
      </div>
      <div class="day"></div>
      <div class="sybtn" @click="ckjrxt"><div class="wzys">首页</div></div>
      <div class="xtbtn" @click="logout"><div class="wzys">退出</div></div>
    </div>
    <div>
      <div class="nr1">
        <img src="../../assets/images/bigscreen/yszl.png" class="d_l_img" />
        <img
          src="../../assets/images/bigscreen/lyxs.png"
          class="d_l_img"
          style="top: 160px"
        />
        <div class="nr_text">三条红线监管</div>
        <div class="stx_l">
          <div class="s_l_value">
            {{ threeRedLines.kZwaterSum }}<span>亿m³</span>
          </div>
          <div class="s_l_title">用水总量</div>
        </div>
        <div class="stx_l" style="top: 165px">
          <div class="s_l_value">
            61.63<span style="margin-left: 5px; font-size: 14px">%</span>
          </div>
          <div class="s_l_title">截至目前农业<br />灌溉水利用系数</div>
        </div>

        <div class="stx_r">
          <div class="s_l_value">
            {{ threeRedLines.kZsurfaceWaterSum }}<span>亿m³</span>
          </div>
          <div class="s_l_title">地表用水</div>
        </div>
        <div class="stx_r" style="left: 414px">
          <div class="s_l_value">
            {{ threeRedLines.kZunderWaterSum }}<span>亿m³</span>
          </div>
          <div class="s_l_title">地下用水</div>
        </div>

        <div class="stx_r" style="top: 170px">
          <div class="s_l_value">2.56<span>亿m³</span></div>
          <div class="s_l_title">截至目前农业<br />用水量</div>
        </div>
        <div class="stx_r" style="top: 170px; left: 414px">
          <div class="s_l_value">4.16<span>亿m³</span></div>
          <div class="s_l_title">截至目前农业<br />引水量</div>
        </div>
      </div>
      <div class="nr2">
        <div class="nr_text" style="top: 10px">计量体系监管</div>
        <div class="bar_title">水情监测站</div>
        <div class="bar_title" style="top: 170px">水量监测站</div>
        <div class="bar_title" style="top: 270px">视频图像监测站</div>
        <!--        <div class="bfb_x" >-->
        <!--          <div class="bx_bor" ></div>-->
        <!--          <div class="bx_bor" style="left: 20px; top: 111px; width: 98px; height: 119px;" ></div>-->
        <!--          <div class="bx_bor" style="left: 33px; top: 126px; width: 84px; height: 104px;" ></div>-->
        <!--          <div class="bx_bor" style="left: 46px; top: 141px; width: 70px; height: 89px;" ></div>-->
        <!--          <div class="bx_bor" style="left: 59px; top: 158px; width: 57px; height: 72px;" ></div>-->
        <!--          <div class="bx_bor" style="left: 72px; top: 175px; width: 43px; height: 55px;" ></div>-->
        <!--          <div class="bx_bor" style="left: 85px; top: 191px; width: 31px; height: 39px;" ></div>-->
        <!--          <div class="bx_bor" style="left: 98px; top: 206px; width: 18px; height: 23px;" ></div>-->
        <!--          <div class="bx_bor" style="left: 111px; top: 222px; width: 6px; height: 7px;" ></div>-->
        <!--        </div>-->
        <!--        <div class="bfb_title" >-->
        <!--          <ul>-->
        <!--            <li  v-for="item in bfbTitleList">{{item.statTypeSum}}%</li>-->
        <!--          </ul>-->
        <!--        </div>-->
        <!--        <div class="bfb_value" >-->
        <!--          <ul>-->
        <!--            <li  v-for="item in bfbTitleList">{{item.dictLabel}}</li>-->
        <!--          </ul>-->
        <!--        </div>-->
        <div id="txbfb"></div>
        <div id="ysbar"></div>
        <div id="qsbar"></div>
        <div id="imagebar"></div>
      </div>
      <div class="nr3">
        <div class="nr_text" style="top: 10px">终端水价监管</div>
        <div class="zw1"></div>
        <div class="zw2"></div>
        <table class="zdsj">
          <tr>
            <td>
              <div class="t_d_sj">
                {{ threeRedLines.targetWaterPrice }}<span>元</span>
              </div>
              <div class="t_d_title">完全成本水价</div>
            </td>
            <td>
              <div class="t_d_sj">
                {{ threeRedLines.actualWaterPrice }}<span>元</span>
              </div>
              <div class="t_d_title">现行实际执行水价</div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="t_d_sj">
                {{ threeRedLines.diversionWaterPrice }}<span>元</span>
              </div>
              <div class="t_d_title">截至目前引水推算水价</div>
            </td>
            <td>
              <div class="t_d_sj">
                {{ threeRedLines.usingWaterPrice }}<span>元</span>
              </div>
              <div class="t_d_title">截至目前用水推算水价</div>
            </td>
          </tr>
        </table>
      </div>
      <div class="nr4">
        <div class="nr_text" style="top: 10px">水费计收监管</div>
        <div class="nr_t_dw">单位：元</div>
        <img src="../../assets/images/bigscreen/ysss_t.png" class="ysss_img" />
        <img
          src="../../assets/images/bigscreen/ysss_t.png"
          class="ysss_img"
          style="top: 343px"
        />
        <div class="sfjs_title" style="margin-top: 60px">
          各基层站应收实收水费对比柱状图
        </div>
        <!--        <el-select v-model="orgCd" placeholder="请选择" @change="getOrgInfo" size="mini" style="position: absolute; right: 8px;top: 17px; " >-->
        <!--          <el-option v-for="item in orgOption" :key="item.orgCd"-->
        <!--                     :label="item.orgNm" :value="item.orgCd"></el-option>-->
        <!--        </el-select>-->
        <div id="ysssbar"></div>
        <div class="sfjs_title">各基层站水费征收率</div>
        <div id="phbar"></div>
      </div>
      <div class="nr5">
        <div class="nr_text" style="top: 10px">当月监测数据畅通率</div>
        <div id="dbstjl"></div>
      </div>

      <div class="c_nr">
        <div class="zgg_img">
          <div class="c_n_value">{{ channelSetData.totalIrrigationArea }}</div>
          <div class="c_n_title">总灌溉面积(万亩)</div>
        </div>
        <div class="zgg_img" style="left: 750px">
          <div class="c_n_value">
            {{ channelSetData.designWaterPriceReform }}
          </div>
          <div class="c_n_title">水价改革设计面(万亩)</div>
        </div>
        <div class="zgg_img" style="left: 900px">
          <div class="c_n_value">{{ channelSetData.totalLengthChannel }}</div>
          <div class="c_n_title">渠道总长度(公里)</div>
        </div>
        <div class="zgg_img" style="left: 1050px">
          <div class="c_n_value">{{ channelSetData.gateConstruction }}</div>
          <div class="c_n_title">闸口建设(座)</div>
        </div>

        <div class="zgg_img" style="left: 1200px">
          <div class="c_n_value">3130.47</div>
          <div class="c_n_title">截止目前累计收缴水费(万元)</div>
        </div>
        <img src="../../assets/images/bigscreen/dt1.png" class="dtimg" />
        <div class="dt_bz">
          <div class="bz_gqk"></div>
          <div class="bz_zqk"></div>
          <div class="bz_dqk"></div>
          <div class="bz_qdwz">干渠</div>
          <div class="bz_qdwz" style="top: 523px">支渠</div>
          <div class="bz_qdwz" style="top: 546px">斗渠</div>
        </div>
        <!--        <div class="dttsk" >-->
        <!--          <div class="dt_title" ><span>渠道名称</span></div>-->
        <!--          <div>-->
        <!--            <div class="qdinfo" >-->
        <!--              <div class="d_info_v" >345.12</div>-->
        <!--              <div>渠道长度(公里)</div>-->
        <!--            </div>-->
        <!--            <div class="qdinfo" >-->
        <!--              <div class="d_info_v" >24.11</div>-->
        <!--              <div>灌溉面积(万亩)</div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
    </div>
  </div>
    </ScaleScreen>
</template>

<script>
import {
  statTypeByRatio,
  listBigScreenStationDataWzl,
  listBigScreenWaterSumPlayVo,
  listCountWaterStation,
  listOrgReceivablePaidWaterFees,
  listOrgWaterFeeCollectionRate,
  listChannelSetData,
  listAnnualTaskProgress,
} from "@/api/bigScreen/bigScreen";
import { listAllWiOrganB } from "@/api/datam/WiOrganB";
import echarts from "echarts";
import ScaleScreen from "@/views/bigscreen/scale_screen.vue";
export default {
  name: "index",
    components: {
    ScaleScreen,
  },
  data() {
    return {
      selfAdaption: true,
      orgCd: "",
      gdbtn: false,
      timer: "",
      nowWeek: "",
      nowDate: "",
      nowTime: "",
      bfbTitleList: [],
      bfbValveList: [],
      statTypeList: [],
      stationDataWzlList: [],
      // 查询参数
      queryParams: {
        orgCd: "ORG6543220000",
      },
      //三条红线
      threeRedLines: {
        kZunderWaterSum: 0,
        kZsurfaceWaterSum: 0,
        kZwaterSum: 0,
        dNunderWaterSum: 0,
        dNsurfaceWaterSum: 0,
        dNwaterSum: 0,
        targetWaterPrice: 0,
        actualWaterPrice: 0,
        diversionWaterPrice: 0,
        usingWaterPrice: 0,
      },
      //测站在线离线数
      waterStation: {
        reportRegimeNum: 0,
        faultRegimeNum: 0,
        reportYieldNum: 0,
        faultYieldNum: 0,
        reportImageNum: 0,
        faultImageNum: 0,
      },
      orgReceivablePaidWaterFees: {},
      //渠道数据
      channelSetData: {
        totalIrrigationArea: 0,
        totalLengthChannel: 0,
        gateConstruction: 0,
        designWaterPriceReform: 0,
      },
      orgOption: [],
    };
  },
  mounted() {
    this.formatNumber(567340009);
    this.getTime();
    this.initChart();
    this.initchart_zsl();
    //this.initchart_t();
    document.body.setAttribute("style", "background:#0d1019");
  },
  beforeCreate() {
    document.body.setAttribute("style", "background:#0d1019");
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      document.body.removeAttribute("style");
    }
  },
  created() {
    this.getStatTypeByRatio();
    this.getBigScreenStationDataWzlList();
    this.getBigScreenWaterSumPlayVo();
    this.getCountWaterStation();
    // this.getOrgReceivablePaidWaterFees();
    // this.getAllWiOrganB();
    // this.getOrgWaterFeeCollectionRate();
    this.getChannelSetData();
    this.getAnnualTaskProgressList();
  },
  methods: {
    getAnnualTaskProgressList(orgCd) {
      this.loading = true;
      listAnnualTaskProgress({ orgCd: orgCd }).then((response) => {
        this.loading = true;
        const orgRateList = response.rows;
        const orgNmList = [];
        const rateList = [];
        const orgNmYsList = [];
        const orgNmSsList = [];
        for (let i = 0; i < orgRateList.length; i++) {
          orgNmList.push(orgRateList[i].jurisdiction);
          orgNmYsList.push(orgRateList[i].taskAmount);
          orgNmSsList.push(orgRateList[i].totalWaterFees);
          rateList.push(orgRateList[i].rate);
        }
        this.initchart_zsl(orgNmList, rateList);
        orgRateList.sort(
          (a, b) => parseInt(b.taskAmount) - parseInt(a.taskAmount)
        );
        const orgNmListsfjs = [];
        const orgNmYsListsfjs = [];
        const orgNmSsListsfjs = [];
        const rateListsfjs = [];
        for (let i = 0; i < orgRateList.length; i++) {
          orgNmListsfjs.push(orgRateList[i].jurisdiction);
          orgNmYsListsfjs.push(orgRateList[i].taskAmount);
          orgNmSsListsfjs.push(orgRateList[i].totalWaterFees);
          rateListsfjs.push(orgRateList[i].rate);
        }
        this.initchart_sfjs(orgNmListsfjs, orgNmYsListsfjs, orgNmSsListsfjs);
      });
    },
    getChannelSetData() {
      this.loading = true;
      listChannelSetData().then((response) => {
        const pd = response.data;
        this.channelSetData.totalIrrigationArea = pd.totalIrrigationArea;
        this.channelSetData.totalLengthChannel = pd.totalLengthChannel;
        this.channelSetData.gateConstruction = pd.gateConstruction;
        this.channelSetData.designWaterPriceReform = pd.designWaterPriceReform;
      });
    },
    // getAllWiOrganB(){
    //   this.loading = true;
    //   listAllWiOrganB().then((response) => {
    //     // let arr =response.rows.slice(1);
    //     let arr =response.rows;
    //     this.orgCd = arr[0].orgCd
    //     this.orgOption=arr
    //     this.getAnnualTaskProgressList(this.orgOption[0].orgCd);
    //     // this.getOrgReceivablePaidWaterFees(this.orgOption[0].orgCd);
    //   });
    // },
    // getOrgInfo(row){
    //   this.loading = true;
    //   console.log(row)
    //   this.getAnnualTaskProgressList(row);
    //   /*this.getOrgReceivablePaidWaterFees(row);*/
    //   // this.orgReceivablePaidWaterFees.forEach(item => {
    //   //   if (item.orgCd == row){
    //   //     this.initchart_sfjs(item);
    //   //   }
    //   // })
    // },
    // getOrgWaterFeeCollectionRate(){
    //   listOrgWaterFeeCollectionRate().then((response) => {
    //     this.loading = true;
    //     const orgRateList = response.data.slice(1);
    //     const orgNmList = [];
    //     const rateList = [];
    //     for (let i = 0; i < orgRateList.length; i++) {
    //       orgNmList.push(orgRateList[i].orgNm);
    //       rateList.push(orgRateList[i].rate);
    //     }
    //     this.initchart_zsl(orgNmList,rateList);
    //   })
    // },
    /**查询测站在线离线数*/
    getCountWaterStation() {
      this.loading = true;
      listCountWaterStation().then((response) => {
        const pd = response.data;
        this.waterStation.reportRegimeNum = pd.reportRegimeNum;
        this.waterStation.faulRegimeNum = pd.faulRegimeNum;
        this.waterStation.reportYieldNum = pd.reportYieldNum;
        this.waterStation.faultYieldNum = pd.faultYieldNum;
        this.waterStation.reportImageNum = pd.reportImageNum;
        this.waterStation.faultImageNum = pd.faultImageNum;
        this.initysqsChat(
          this.waterStation.reportRegimeNum,
          this.waterStation.faulRegimeNum,
          this.waterStation.reportYieldNum,
          this.waterStation.faultYieldNum,
          this.waterStation.reportImageNum,
          this.waterStation.faultImageNum
        );
      });
    },
    // /**获取机构应收实收水费*/
    // getOrgReceivablePaidWaterFees(orgCd){
    //   this.loading = true;
    //   listOrgReceivablePaidWaterFees().then((response) => {
    //     const pd = response.data;
    //     this.orgReceivablePaidWaterFees=pd;
    //     pd.forEach(item => {
    //       if (item.orgCd == orgCd){
    //         this.initchart_sfjs(item);
    //       }
    //     })
    //   });
    // },
    /**查询三条红线*/
    getBigScreenWaterSumPlayVo() {
      this.loading = true;
      listBigScreenWaterSumPlayVo().then((response) => {
        const pd = response.data;
        this.threeRedLines.kZunderWaterSum = pd.kZunderWaterSum;
        this.threeRedLines.kZsurfaceWaterSum = pd.kZsurfaceWaterSum;
        this.threeRedLines.kZwaterSum = pd.kZwaterSum;
        this.threeRedLines.dNsurfaceWaterSum = pd.dNsurfaceWaterSum;
        this.threeRedLines.dNunderWaterSum = pd.dNunderWaterSum;
        this.threeRedLines.dNwaterSum = pd.dNwaterSum;
        this.threeRedLines.targetWaterPrice = pd.targetWaterPrice;
        this.threeRedLines.actualWaterPrice = pd.actualWaterPrice;
        this.threeRedLines.diversionWaterPrice = pd.diversionWaterPrice;
        this.threeRedLines.usingWaterPrice = pd.usingWaterPrice;
      });
    },
    /** 查询行政区划登记列表 */
    getStatTypeByRatio() {
      this.loading = true;
      statTypeByRatio(this.queryParams).then((response) => {
        const statTypeList = response.data;
        this.bfbTitleList = response.data;
        const wzlist = [];
        const wzcountlist = [];
        for (let i = 0; i < statTypeList.length; i++) {
          // wzlist.push(name+":"+statTypeList[i].dictLabel);
          // wzcountlist.push(value+":"+statTypeList[i].statTypeSum);
          if (statTypeList[i].statTypeSum === 0) {
          } else {
            wzlist.push({
              value: statTypeList[i].statTypeSum,
              name: statTypeList[i].dictLabel,
            });
          }
          // wzlist.push({
          //   type: 'pie',
          //   data: [statTypeList[i].statTypeSum],
          //   coordinateSystem: 'polar',
          //   name: statTypeList[i].dictLabel,
          //   itemStyle: {
          //     opacity: 0.8,
          //     borderRadius: 10,
          //     borderWidth: 1
          //   }
          // }
          // );
        }
        console.log(wzlist);
        this.initradiusbar(wzlist);
        this.loading = false;
      });
    },
    getBigScreenStationDataWzlList() {
      this.loading = true;
      this.queryParams.orgCd = "ORG6543220000";
      listBigScreenStationDataWzl(this.queryParams).then((response) => {
        const stationDataWzlList = response.data;
        const orgNmList = [];
        const yblist = [];
        const sblist = [];
        const ctl = [];
        for (let i = 0; i < stationDataWzlList.length; i++) {
          orgNmList.push(stationDataWzlList[i].orgNm);
          yblist.push(stationDataWzlList[i].ybCount);
          sblist.push(stationDataWzlList[i].sbCount);
          ctl.push(stationDataWzlList[i].integrityRate);
        }
        this.initChart(orgNmList, yblist, sblist, ctl);
        this.loading = false;
      });
    },
    initysqsChat(x, y, lx, ly, imageX, imageY) {
      var echarts = require("echarts");
      let ysinit = echarts.init(document.getElementById("ysbar"));

      ysinit.setOption({
        tooltip: {
          trigger: "item",
        },
        color: ["#0599e6", "#e39c0d"],
        series: [
          {
            name: "水情监测站",
            type: "pie",
            radius: [20, 30],
            center: ["40%", "50%"],
            startAngle: 180,
            label: {
              color: "#fff",
              show: true,
              formatter(param) {
                // correct the percentage
                return param.name + " (" + param.percent * 2 + "%)";
              },
            },
            itemStyle: {
              borderRadius: 3,
            },
            data: [
              { value: x, name: "在线" },
              { value: y, name: "离线" },
              {
                // make an record to fill the bottom 50%
                value: x + y,
                itemStyle: {
                  // stop the chart from rendering this piece
                  color: "none",
                  decal: {
                    symbol: "none",
                  },
                },
                label: {
                  show: false,
                },
              },
            ],
          },
        ],
      });

      let qsinit = echarts.init(document.getElementById("qsbar"));
      qsinit.setOption({
        tooltip: {
          trigger: "item",
        },
        color: ["#6fbd50", "#c85329"],
        series: [
          {
            name: "水量监测站",
            type: "pie",
            radius: [20, 30],
            center: ["40%", "50%"],
            startAngle: 180,
            label: {
              color: "#fff",
              show: true,
              formatter(param) {
                // correct the percentage
                return param.name + " (" + param.percent * 2 + "%)";
              },
            },
            itemStyle: {
              borderRadius: 3,
            },
            data: [
              { value: lx, name: "在线" },
              { value: ly, name: "离线" },
              {
                // make an record to fill the bottom 50%
                value: lx + ly,
                itemStyle: {
                  // stop the chart from rendering this piece
                  color: "none",
                  decal: {
                    symbol: "none",
                  },
                },
                label: {
                  show: false,
                },
              },
            ],
          },
        ],
      });

      let imageinit = echarts.init(document.getElementById("imagebar"));
      imageinit.setOption({
        tooltip: {
          trigger: "item",
        },
        color: ["#fa5102", "#fa1f02"],
        series: [
          {
            name: "视频图像监测站",
            type: "pie",
            radius: [20, 30],
            center: ["40%", "50%"],
            startAngle: 180,
            label: {
              color: "#fff",
              show: true,
              formatter(param) {
                // correct the percentage
                return param.name + " (" + param.percent * 2 + "%)";
              },
            },
            itemStyle: {
              borderRadius: 3,
            },
            data: [
              { value: imageX, name: "在线" },
              { value: imageY, name: "离线" },
              {
                // make an record to fill the bottom 50%
                value: imageX + imageY,
                itemStyle: {
                  // stop the chart from rendering this piece
                  color: "none",
                  decal: {
                    symbol: "none",
                  },
                },
                label: {
                  show: false,
                },
              },
            ],
          },
        ],
      });
    },
    // initradiusbar(label){
    //   var echarts = require('echarts');
    //   let einitrbar = echarts.init(document.getElementById('txbfb'));
    //   console.log(label)
    //   einitrbar.setOption({
    //     angleAxis: {
    //       max: 100,
    //       startAngle: 0,
    //       splitLine: {
    //         show: false
    //       },
    //       axisLabel:{ show:false },
    //       axisLine:{ show:false },
    //       axisTick:{ show:false },
    //     },
    //     color:["#35bc7b","#dd9f55","#4b76e0","#caed67","#ea5ded","#e8d7a3","#4eeff7","#dd6a5b","#9663f8"],
    //     radiusAxis: {
    //       type: 'category',
    //       axisLabel:{ show:false },
    //       axisLine:{ show:false },
    //       axisTick:{ show:false },
    //     },
    //     polar: {
    //       radius: [0, '100%']
    //     },
    //     series:label,
    //   });
    //
    // },

    initradiusbar(data) {
      var echarts = require("echarts");
      let einitrbar = echarts.init(document.getElementById("txbfb"));
      einitrbar.setOption({
        colorList: [
          "#35bc7b",
          "#dd9f55",
          "#4b76e0",
          "#caed67",
          "#ea5ded",
          "#e8d7a3",
          "#4eeff7",
          "#dd6a5b",
          "#9663f8",
        ],
        title: {
          text: "监测站汇总",
          subtext: "",
          textStyle: {
            // 文字颜色
            color: "#09a1f3",
            // 字体大小
            fontSize: 18,
            // 字体粗细:'normal,'bold,'bolder','lighter','100|200|300|400...'
            fontWeight: "bolder",
            //字体系列
            fontFamily: "sans-serif",
            //字体风格 'normal','italic','oblique'
            fontStyle: "normal",
          },
        },
        tooltip: {
          trigger: "item",
        },

        series: {
          name: "测站类型",
          type: "pie",
          radius: "40%",
          center: ["40%", "40%"],
          data: data.map((data, index) => {
            var colorList = [
              "#35bc7b",
              "#dd9f55",
              "#4b76e0",
              "#caed67",
              "#ea5ded",
              "#e8d7a3",
              "#4eeff7",
              "#dd6a5b",
              "#9663f8",
            ];
            data.label = {
              color: colorList[index],
            };
            return data;
          }),
          itemStyle: {
            color: (params) => {
              var colorList = [
                "#35bc7b",
                "#dd9f55",
                "#4b76e0",
                "#caed67",
                "#ea5ded",
                "#e8d7a3",
                "#4eeff7",
                "#dd6a5b",
                "#9663f8",
              ];
              var index = params.dataIndex;
              return colorList[index];
            },
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      });
    },
    initChart(orgNmList, yblist, sblist, ctl) {
      var echarts = require("echarts");
      let einit = echarts.init(document.getElementById("dbstjl"));

      einit.setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "20%",
          left: "0%",
          right: "1%",
          bottom: "1%",
          containLabel: true,
        },
        color: ["#3f69fd", "#bff76f", "#d545f8"],
        legend: {
          data: ["应报", "实报", "畅通率"],
          textStyle: {
            color: "#fff",
          },
          itemGap: 50,
        },
        xAxis: [
          {
            type: "category",
            data: orgNmList,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              interval: 0,
              show: true,
              textStyle: {
                color: "#f9eeee",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#f9eeee",
                width: 1, //这里是为了突出显示加上的
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value}",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#f9eeee",
                width: 1, //这里是为了突出显示加上的
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#16203b",
                width: 1,
                type: "solid",
              },
            },
          },
          {
            type: "value",
            axisLabel: {
              formatter: "{value} %",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#f9eeee",
                width: 1, //这里是为了突出显示加上的
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#16203b",
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        series: [
          {
            name: "应报",
            type: "bar",
            barGap: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0],
            },
            data: yblist,
          },
          {
            name: "实报",
            type: "bar",
            barGap: 0,
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0],
            },
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: sblist,
          },
          {
            name: "畅通率",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " %";
              },
            },
            data: ctl,
          },
        ],
      });
    },
    // initchart_sfjs(orgNmList,orgNmYsList,orgNmSsList){
    //   var echarts = require('echarts');
    //   let einit2 = echarts.init(document.getElementById('ysssbar'));
    //
    //   einit2.setOption({
    //     tooltip: {
    //       trigger: 'axis',
    //     },
    //     grid: {
    //       top: '5%',
    //       left: '1%',
    //       right: '1%',
    //       bottom: '4%',
    //       containLabel: true
    //     },
    //     color:['#b1f657','#ff722c'],
    //     xAxis: [
    //       {
    //         type: 'category',
    //         data: orgNmList,
    //         axisPointer: {
    //           type: 'shadow'
    //         },
    //         axisLabel: {
    //           fontSize: 10, //设置坐标轴文本标签的字体大小
    //           interval: 0,
    //           rotate:25,
    //           show: true,
    //           textStyle: {
    //             color: '#f9eeee'
    //           }
    //         },
    //         axisLine:{
    //           show: true,
    //           lineStyle:{
    //             color:'#f9eeee',
    //             width:1,//这里是为了突出显示加上的
    //           }
    //         },
    //       }
    //     ],
    //     yAxis: [
    //       {
    //         type: 'value',
    //         axisLabel: {
    //           formatter: '{value}'
    //         },
    //         axisLine: {
    //           show: true,
    //           lineStyle:{
    //             color:'#f9eeee',
    //             width:1,//这里是为了突出显示加上的
    //           }
    //         },
    //         splitLine: {
    //           show: false,
    //         },
    //       }
    //     ],
    //     series: [
    //
    //       {
    //         name: '应收',
    //         type: 'bar',
    //         label: {
    //           show: false,
    //           position: 'top'
    //         },
    //         barGap: 0,
    //         tooltip: {
    //           valueFormatter: function (value) {
    //             return value ;
    //           }
    //         },
    //         itemStyle: {
    //           barBorderRadius: [4,4,0,0],
    //         },
    //         data:
    //         // org.s1,org.s2,org.s3,org.s4,org.s5,org.s6,org.s7,org.s8,org.s9,org.s10,org.s11,org.s12
    //         orgNmYsList
    //
    //       },
    //       {
    //         name: '实收',
    //         type: 'bar',
    //         barGap: 0,
    //         itemStyle: {
    //           barBorderRadius: [4,4,0,0],
    //         },
    //         tooltip: {
    //           valueFormatter: function (value) {
    //             return value ;
    //           }
    //         },
    //         data:
    //         // org.s101,org.s201,org.s301,org.s401,org.s501,org.s601,org.s701,org.s801,org.s901,org.s1001,org.s1101,org.s1201
    //         orgNmSsList,
    //       }
    //     ]
    //   });
    //
    //
    // },
    // initchart_zsl(x,y){
    //   var echarts = require('echarts');
    //   let einit3 = echarts.init(document.getElementById('phbar'));
    //
    //   let colorarr = ['#1847FE','#584AFC','#6A5DFC','#5B85FC','#5A87FC','#52D07B','#7ECD45','#DEA933','#FF7A42','#FF4474']
    //
    //   einit3.setOption({
    //     xAxis: {
    //       show: false,
    //       max: 'dataMax',
    //       splitLine: {
    //         show: false,
    //       },
    //     },
    //     grid: {
    //       top: '1%',
    //       left: '1%',
    //       right: '10%',
    //       bottom: '0%',
    //       containLabel: true
    //     },
    //     yAxis: {
    //       type: 'category',
    //       data: x,
    //       inverse: true,
    //       animationDuration: 300,
    //       animationDurationUpdate: 300,
    //       axisLabel: {
    //         fontSize: 10,
    //         show: true,
    //         textStyle: {
    //           color: '#f9eeee'
    //         }
    //       },
    //       axisTick: { show: false },
    //       axisLine:{
    //         show: false,
    //         lineStyle:{
    //           color:'#f9eeee',
    //           width:1,//这里是为了突出显示加上的
    //         }
    //       },
    //     },
    //     series: [
    //       {
    //         realtimeSort: false,
    //         type: 'bar',
    //         data: y,
    //         label: {
    //           show: true,
    //           position: 'right',
    //           valueAnimation: true,
    //           formatter: '{c}%',
    //           color: '#fff',
    //         },
    //         itemStyle: {
    //           color: function (param) {
    //             return colorarr[param.dataIndex]+'' || '#5470c6';
    //           },
    //           barBorderRadius: [0,2,2,0],
    //         },
    //       }
    //     ],
    //   });
    //
    // },

    initchart_sfjs() {
      var echarts = require("echarts");
      let einit2 = echarts.init(document.getElementById("ysssbar"));

      einit2.setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "5%",
          left: "1%",
          right: "1%",
          bottom: "4%",
          containLabel: true,
        },
        color: ["#b1f657", "#ff722c"],
        xAxis: [
          {
            type: "category",
            data: [
              "峡口南干渠灌区",
              "吐尔洪灌区",
              "杜热灌区",
              "恰库尔图灌区",
              "喀拉通克灌区",
              "苏普特灌区",
              "温都哈拉灌区",
              "铁买克灌区",
              "库尔特灌区",
              "黄泥滩灌区",
            ],
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              fontSize: 10, //设置坐标轴文本标签的字体大小
              interval: 0,
              rotate:25,
              show: true,
              textStyle: {
                color: "#f9eeee",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#f9eeee",
                width: 1, //这里是为了突出显示加上的
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value}",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#f9eeee",
                width: 1, //这里是为了突出显示加上的
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "应收",
            type: "bar",
            barGap: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0],
            },
            data: [
              135.6, 162.2, 76.7, 77.0, 24.9, 7.0, 23.2, 25.6, 76.7, 135.6,
              23.2, 25.6, 76.7, 135.6, 32.6, 25.6, 76.7, 135.6, 162.2, 20.0,
              6.4, 3.3,
            ],
          },
          {
            name: "实收",
            type: "bar",
            barGap: 0,
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0],
            },
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [
              18.8, 28.7, 25.6, 62.6, 45.9, 29.0, 26.4, 182.2, 48.7, 76.7,
              135.6, 32.6, 25.6, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
            ],
          },
        ],
      });
    },
    initchart_zsl() {
      var echarts = require("echarts");
      let einit3 = echarts.init(document.getElementById("phbar"));

      let colorarr = [
        "#1847FE",
        "#584AFC",
        "#6A5DFC",
        "#5B85FC",
        "#5A87FC",
        "#52D07B",
        "#7ECD45",
        "#DEA933",
        "#FF7A42",
        "#FF4474",
      ];

      einit3.setOption({
        xAxis: {
          show: false,
          max: "dataMax",
          splitLine: {
            show: false,
          },
        },
        grid: {
          top: "1%",
          left: "1%",
          right: "10%",
          bottom: "0%",
          containLabel: true,
        },
        yAxis: {
          type: "category",
          data: [
            "峡口南干渠灌区",
            "吐尔洪灌区",
            "杜热灌区",
            "恰库尔图灌区",
            "喀拉通克灌区",
            "苏普特灌区",
            "温都哈拉灌区",
            "铁买克灌区",
            "库尔特灌区",
            "黄泥滩灌区",
          ],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#f9eeee",
            },
          },
          axisTick: { show: false },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#f9eeee",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        series: [
          {
            realtimeSort: true,
            type: "bar",

            data: [
              91.23, 88.02, 87.09, 86.81, 84.02, 82.91, 80.11, 62.17, 52.34,
              46.18,
            ],
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
              formatter: "{c}%",
              color: "#fff",
            },
            itemStyle: {
              color: function (param) {
                return colorarr[param.dataIndex] + "" || "#5470c6";
              },
              barBorderRadius: [0, 2, 2, 0],
            },
          },
        ],
      });
    },
    ckjrxt() {
      const link = "/index";
      window.open(link, "_blank");
    },
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/login";
          });
        })
        .catch(() => {});
    },
    formatNumber(num) {
      return num.toString().replace(/\d+/, function (n) {
        return n.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
      });
    },
    sizeChange(size) {},
    getTime() {
      this.timer = setInterval(() => {
        let timeDate = new Date();
        let year = timeDate.getFullYear();
        let mounth = timeDate.getMonth() + 1;
        let day = timeDate.getDate();
        let hours = timeDate.getHours();
        hours = hours >= 10 ? hours : "0" + hours;
        let minutes = timeDate.getMinutes();
        minutes = minutes >= 10 ? minutes : "0" + minutes;
        let seconds = timeDate.getSeconds();
        seconds = seconds >= 10 ? seconds : "0" + seconds;

        this.nowDate = `${year}-${mounth}-${day}`;
        this.nowTime = `${hours}:${minutes}:${seconds}`;
      }, 1000);
    },
  },
};
</script>

<style scoped lang="scss">
@import url("../../assets/css/font.css");

#dp_l {
  min-width: 1920px;
  min-height: 1080px;
  background-image: url("../../assets/images/bigscreen/bs_bimg.png");
  background-size: auto;

  .dp_title {
    position: absolute;
    left: 45px;
    top: 130px;
    width: 410px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
  }

  .nr1 {
    position: absolute;
    left: 21px;
    top: 129px;
    width: 524px;
    height: 248px;
    background-image: url("../../assets/images/bigscreen/k_n1.png");
    background-size: auto;
  }

  .nr2 {
    position: absolute;
    left: 21px;
    top: 389px;
    width: 524px;
    height: 382px;
    background-image: url("../../assets/images/bigscreen/k_n2.png");
    background-size: auto;
  }

  .nr3 {
    position: absolute;
    left: 1376px;
    top: 130px;
    width: 524px;
    height: 295px;
    background-image: url("../../assets/images/bigscreen/k_n3.png");
    background-size: auto;
  }

  .nr4 {
    position: absolute;
    left: 1376px;
    top: 435px;
    width: 524px;
    height: 625px;
    background-image: url("../../assets/images/bigscreen/k_n4.png");
    background-size: auto;
  }

  .nr5 {
    position: absolute;
    left: 21px;
    top: 781px;
    width: 1343px;
    height: 279px;
    background-image: url("../../assets/images/bigscreen/k_n5.png");
    background-size: auto;
  }

  .zgg_img {
    position: absolute;
    left: 600px;
    top: 139px;
    width: 100px;
    height: 52px;
    text-align: center;
    background-image: url("../../assets/images/bigscreen/zggmj_img.png");

    background-repeat: no-repeat;
    background-position: 10px;

    .c_n_value {
      color: #fff;
      width: 100px;
      font-size: 30px;
      line-height: 25px;
      font-family: "digital-7";
    }

    .c_n_title {
      width: 100px;
      margin-top: 26px;
      font-size: 12px;
      color: #f1f1f1;
    }
  }

  .nr_text {
    position: absolute;
    left: 55px;
    top: 10px;
    width: 435px;
    font-weight: 800;
    font-size: 28px;
    letter-spacing: 4px;
    height: 40px;
    background-image: linear-gradient(#daf3fc, #daf3fc, #00a0ff);
    background-clip: text;
    color: transparent;
  }

  .bar_title {
    position: absolute;
    left: 300px;
    top: 65px;
    font-weight: 800;
    font-size: 16px;
    background-image: linear-gradient(#daf3fc, #daf3fc, #00a0ff);
    background-clip: text;
    color: transparent;
  }

  .zdsj {
    margin-top: 66px;
    width: 100%;
    height: 227px;
    text-align: center;
    color: #f1f1f1;
    .t_d_sj {
      font-size: 38px;
      height: 37px;
      letter-spacing: 2px;
      font-family: "digital-7";
      span {
        font-size: 12px;
      }
    }
    .t_d_title {
      color: #a7c5ec;
    }
  }

  .zw1 {
    position: absolute;
    left: 18px;
    top: 179px;
    width: 491px;
    height: 1px;
    border-top: 1px solid #1f2535;
  }
  .zw2 {
    position: absolute;
    left: 264px;
    top: 84px;
    width: 1px;
    height: 196px;
    border-right: 1px solid #1f2535;
  }

  .stx_l {
    position: absolute;
    left: 96px;
    top: 80px;
    width: 190px;
    line-height: 22px;
    height: 66px;
    .s_l_value {
      font-size: 34px;
      color: #fff;
      letter-spacing: 2px;
      font-family: "digital-7";
      span {
        font-size: 12px;
      }
    }
    .s_l_title {
      font-size: 14px;
      color: #a7c5ec;
    }
  }

  .stx_r {
    position: absolute;
    left: 261px;
    top: 83px;
    width: 110px;
    line-height: 21px;
    height: 53px;

    .s_l_value {
      font-size: 25px;
      color: #80d3f0;
      letter-spacing: 2px;
      font-family: "digital-7";
      span {
        font-size: 12px;
        color: #fff;
      }
    }
    .s_l_title {
      font-size: 14px;
      color: #a7c5ec;
    }
  }

  .nr_t_dw {
    position: absolute;
    left: 445px;
    top: 71px;
    width: 70px;
    font-size: 12px;
    color: #f1f1f1;
  }
}

.d_top {
  position: relative;

  .sybtn {
    position: absolute;
    left: 107px;
    top: 63px;
    width: 128px;
    height: 50px;
    line-height: 48px;
    text-align: center;
    font-weight: 800;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
    background-image: url("../../assets/images/bigscreen/sy_btn.png");
    background-size: auto;
  }

  .wzys {
    background-image: linear-gradient(#daf3fc, #daf3fc, #0da4fc);
    background-clip: text;
    color: transparent;
  }

  .xtbtn {
    position: absolute;
    left: 1686px;
    top: 63px;
    width: 128px;
    height: 50px;
    line-height: 48px;
    text-align: center;
    font-weight: 800;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
    background-image: url("../../assets/images/bigscreen/tc_btn.png");
    background-size: auto;
  }

  .d_t_title {
    position: absolute;
    left: 176px;
    top: 0px;
    width: 1567px;
    height: 106px;
    background-image: url("../../assets/images/bigscreen/bs_top_bimg.png");
    background-size: auto;
  }

  .sjdate {
    position: absolute;
    left: 35px;
    top: 3px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    color: #fff;
    //font-family: "digital-7";
  }
}

.d_l_img {
  position: absolute;
  left: 14px;
  top: 71px;
  width: 68px;
}

.ysss_img {
  position: absolute;
  left: 19px;
  top: 68px;
  width: 24px;
}

.dtimg {
  position: absolute;
  left: 677px;
  top: 290px;
  width: 589px;
}

.dttsk {
  position: absolute;
  left: 633px;
  top: 265px;
  width: 229px;
  height: 128px;
  background-image: url("../../assets/images/bigscreen/dt_tsk.png");
  background-size: auto;
  z-index: 4;
}

.bz_gqk {
  position: absolute;
  left: 675px;
  top: 504px;
  width: 28px;
  height: 10px;
  background: #8cc9ff;
  z-index: 4;
}

.bz_zqk {
  position: absolute;
  left: 675px;
  top: 529px;
  width: 28px;
  height: 4px;
  background: #7298ff;
  z-index: 4;
}

.bz_dqk {
  position: absolute;
  left: 675px;
  top: 555px;
  width: 28px;
  height: 1px;
  background: #3fdbe7;
  z-index: 4;
}

.bz_qdwz {
  position: absolute;
  left: 711px;
  top: 501px;
  width: 30px;
  height: 20px;
  font-size: 12px;
  z-index: 4;
  color: #b4bfec;
}

.dt_title {
  font-size: 17px;
  font-weight: 800;
  margin-left: 14px;
  margin-top: 13px;
  width: 109px;
  height: 30px;
  span {
    background-image: linear-gradient(#daf3fc, #daf3fc, #0da4fc);
    background-clip: text;
    color: transparent;
  }
}

.qdinfo {
  display: inline-block;
  font-size: 12px;
  width: 77px;
  margin-top: 20px;
  padding-left: 26px;
  color: #fff;
  .d_info_v {
    font-size: 20px;
    color: #fff82d;
    font-family: "digital-7";
  }
}

#dbstjl {
  position: absolute;
  top: 24px;
  left: 0px;
  width: 1343px;
  height: 248px;
}

#ysbar {
  position: absolute;
  top: 71px;
  left: 296px;
  width: 220px;
  height: 160px;
  z-index: 3;
}

#qsbar {
  position: absolute;
  top: 170px;
  left: 296px;
  width: 220px;
  height: 160px;
  z-index: 3;
}

#imagebar {
  position: absolute;
  top: 280px;
  left: 296px;
  width: 220px;
  height: 160px;
  z-index: 3;
}

#txbfb {
  position: absolute;
  top: 90px;
  left: 11px;
  /*-webkit-transform: rotateY(180deg);*/
  /*transform: rotateY(180deg);*/
  width: 300px;
  height: 300px;
  z-index: 3;
}

.bfb_title {
  position: absolute;
  top: 75px;
  left: 85px;
  line-height: 16px;
  font-size: 13px;
  color: #fff;
  ul {
    list-style: none;
  }
}

.bfb_value {
  position: absolute;
  top: 75px;
  left: 142px;
  line-height: 16px;
  font-size: 13px;
  color: #a7c5ec;
  ul {
    list-style: none;
  }
}

.bx_bor {
  position: absolute;
  top: 94px;
  left: 7px;
  width: 110px;
  height: 136px;
  border: 1px dashed #35598a;
  border-right: none;
  border-bottom: none;
}

.sfjs_title {
  margin-left: 50px;
  width: 435px;
  font-weight: 800;
  font-size: 21px;
  height: 40px;
  background-image: linear-gradient(#e3edf1, #ffffff, #36caff, #00a0ff);
  background-clip: text;
  color: transparent;
}

#ysssbar {
  width: 523px;
  height: 233px;
}

#phbar {
  width: 523px;
  height: 260px;
}

.mrg_15 {
  margin-left: 16px;
}
::v-deep .el-input--mini .el-input__inner {
  background: #172836;
  color: #fff;
}
</style>
